<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>用户注册</title>
	<link rel="stylesheet" href="../statics/bootstrap-3.3.0/css/bootstrap.css">
	<link rel="stylesheet" href="../statics/jquery-ui-1.12.1/jquery-ui.css">
	<link rel="stylesheet" href="../statics/jquery-ui-1.12.1/jquery-ui.theme.css">
	<link rel="stylesheet" href="../statics/css/style.css">
</head>
<body style="background-image: url(../statics/image/background/background1.jpg); background-size: cover">
	<div class="container" style="margin-top: 30px;">
		<div class="row">
			<div style="margin: 20px auto; color: #ffffff">
				<h1 align="center" ; style="color: #292b33">新用户注册</h1>
			</div>
			<div class="col-xs-5 r"
				style="position: absolute; left: 50%; transform: translateX(-50%); padding: 30px; background-color: #ffffff">
				<div class="form-group">
					<label for="name" class="control-label">姓名</label>
					<input id="name" class="form-control" placeholder="请输入姓名" onblur="checkNameRepeat(this)"></input>
					<output id="nameError" style="color: red"></output>
				</div>
				<div class="form-group">
					<label for="gender" class="control-label">性别</label>
					<select id="gender" name="gender" class="form-control">
						<option value="男">男</option>
						<option value="女">女</option>
					</select>
				</div>
				<div class="form-group">
					<label for="mobile" class="control-label">手机</label>
					<input id="mobile" class="form-control" placeholder="请输入手机号码" onblur="checkPhoneRepeat(this)"></input>
					<output id="phoneError" style="color: red"></output>
				</div>
				<div class="form-group">
					<label for="email" class="control-label">邮箱</label>
					<input id="email" class="form-control" placeholder="请输入邮箱" onblur="checkEmailRepeat(this)"></input>
					<output id="emailError" itemid="status" style="color: red" value=""></output>
				</div>
				<div class="form-group">
					<label for="p1" class="control-label">密码</label>
					<input id="p1" name="password" class="form-control" placeholder="请输入密码" type="password" onblur="checkPasswordLen(this)"></input>
					<output id="p1Error" style="color: red"></output>
				</div>
				<div class="form-group">
					<label for="p2" class="control-label">确认密码</label>
					<input id="p2" name="password2" class="form-control" placeholder="再次请输入密码" type="password"
						onblur="checkPasswordIsSame(this)"></input>
					<output id="passError" style="color: red"></output>
				</div>
				<div class="form-group">
					<button type="submit" class="btn btn-primary" id="register">注册</button>
					<a class="btn btn-success pull-right" onClick="javascript :history.back(-1);">返回</a>
				</div>
			</div>
		</div>
	</div>
	</div>
	<script>
		function checkPasswordIsSame() {
			var password = document.getElementById("p1");
			var passwordConfirm = document.getElementById("p2");
			if (password.value != passwordConfirm.value) {
				document.getElementById("passError").innerHTML = "对不起，您2次输入的密码不一致";
			} else {
				document.getElementById("passError").innerHTML = "";
			}
		}
		function checkPasswordLen(){
			var password = $("#p1").val();
			if(password.length<8 || password.length>16){
				document.getElementById("p1Error").innerHTML = "请输入8到16位的密码";
			}
			else{
				document.getElementById("p1Error").innerHTML = "";
			}
		}
		function checkPhoneRepeat(){
			var phoneNum = $("#mobile").val();
			var data = {
				"phoneNum":phoneNum,
			}
			$.ajax({
				url: "/user/checkPhone",
				type: "POST",
				dataType:"json",
				contentType: "application/json;charset=utf-8",
				data:JSON.stringify(data),
				success:function (data) {
						document.getElementById("phoneError").innerHTML = data.message;
				}
			})
		}
		function checkNameRepeat(){
			var name = $("#name").val();
			var data = {
				"name":name,
			}
			$.ajax({
				url: "/user/checkName",
				type: "POST",
				dataType:"json",
				contentType: "application/json;charset=utf-8",
				data:JSON.stringify(data),
				success:function (data) {
					document.getElementById("nameError").innerHTML = data.message;
				}
			})
		}
		function checkEmailRepeat(){
			var email = $("#email").val();
			var data = {
				"email":email,
			}
			$.ajax({
				url: "/user/checkEmail",
				type: "POST",
				dataType:"json",
				contentType: "application/json;charset=utf-8",
				data:JSON.stringify(data),
				success:function (data) {
					document.getElementById("emailError").innerHTML = data.message;
				}
			})
		}
	</script>
	<script src="../statics/jquery-1.12.4/jquery-1.12.4.js"></script>
	<script src="../statics/bootstrap-3.3.0/js/bootstrap.js"></script>
	<script src="../statics/jquery-ui-1.12.1/jquery-ui.js"></script>
	<script src="../statics/jquery-ui-1.12.1/datepicker-zh-CN.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

</body>


<script type="text/javascript">
	$('#register').click(function (){
		var nickName = $("#name").val();  //登录昵称
		var sex = $("#gender").val();  //用户性别
		var phoneNumber = $("#mobile").val();  //用户手机号码
		var email = $("#email").val();  //登录邮箱
		var password = $("#p1").val();  //用户密码
		var passwordConfirm = $("#p2").val();  //用户密码
		var inputData = {
			"nickName":nickName,
			"sex":sex,
			"phoneNumber":phoneNumber,
			"email": email,
			"password":password
		};
		if (password.value != passwordConfirm.value) {
			document.getElementById("passError").innerHTML = "对不起，您2次输入的密码不一致";
		} else {
			$.ajax({
				url: "/user/register",
				type: "POST",
				contentType: "application/json;charset=utf-8",
				data:JSON.stringify(inputData),
				success:function (data) {
					if (data.code == 20000) {
						Swal.fire({
							type: 'success', // 弹框类型
							title: '提示', //标题
							text: data.message, //显示内容
							confirmButtonColor: '#3085d6',// 确定按钮的 颜色
							confirmButtonText: '确定',// 确定按钮的 文字
						}).then((isConfirm) => {
							try {
								window.location.href = "/home/login.html";
							} catch (e) {
								alert(e);
							}
						});
					}
					else {
						Swal.fire("提示",data.message, "error");
					}
				}
			});
		}
	});
</script>
</html>